<script setup>
import { RouterLink, RouterView, useRoute } from "vue-router";
import routerMenu from "./router/router.config";
import { ref, onBeforeMount, watchEffect, watch, reactive } from "vue";
const route = useRoute();
// const menuexpre = reactive([])//展开的路由菜单
const thisRouter = ref(""); //菜单导航
const handlerouter = (item, ischild) => {
  //点击路由
  thisRouter.value = item.name;
};

const showMenu = ref(true); //侧边栏展开与收起

//展开or收起导航
const menuexpre = ref([]); //展开的路由菜单
const showchildMenu = (node) => {
  if (menuexpre.value.includes(node)) {
    menuexpre.value = menuexpre.value.filter((item) => item !== node);
  } else {
    menuexpre.value.push(node);
  }
};

watch(
  //防止刷新路由丢失
  () => route.params,
  () => {
    routerMenu.forEach((item, index) => {
      if (item.path == window.location.pathname) {
        thisRouter.value = item.name;
      }
    });
  }
);

//点击隐藏
const handlehidden = () => {
  showMenu.value = !showMenu.value;
};
</script>

<template>
  <div class="wrapper">
    <div
      :class="
        showMenu
          ? 'cc-left-menu-normal cc-left-menu'
          : 'cc-left-menu cc-left-menu-small'
      "
      v-if="route.path !== '/login'"
    >
      <div class="logo-box">练习</div>
      <ul class="cc-menu">
        <li
          v-show="!item.noShowMenu"
          v-for="(item, index) in routerMenu"
          :class="['cc-li']"
          :key="index"
        >
          <a v-if="item.children" @click="showchildMenu(item.path)">
            {{ item.name }}
          </a>

          <RouterLink
            v-else
            :class="['cc-menu-item', { active: thisRouter == item.name }]"
            :to="{ name: item.name, params: { id: 'propsDemo' } }"
            @click="handlerouter(item)"
          >
            {{ item.name }}
          </RouterLink>

          <ul v-if="item.children" class="menu-ul">
            <li
              v-for="(citem, cindex) in item.children"
              v-show="menuexpre.includes(item.path)"
              :class="['chil-menu-item']"
              :key="cindex"
            >
              <RouterLink
                :to="{ name: citem.name }"
                @click="handlerouter(citem, 1)"
                :class="[{ active: thisRouter == citem.name }]"
              >
                {{ citem.name }}
              </RouterLink>
            </li>
          </ul>
        </li>
      </ul>
      <div class="hiddenbtn" @click="handlehidden">
        {{ showMenu ? "隐藏" : "展开" }}
      </div>
    </div>
    <div :class="route.path !== '/login' ? 'cc-content-box' : 'cc-all-box'">
      <div :class="route.path !== '/login' ? 'cc-content' : ''">
        <div class="cc-beath" v-if="route.path !== '/login'">
          {{ thisRouter }}
        </div>
        <div :class="route.path !== '/login' ? 'cc-page' : ''">
          <RouterView />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.cc-all-box {
  width: 100%;
  height: 100%;
}
.cc-left-menu {
  height: 100vh;
  background-color: rgb(202, 203, 209);
  // width: 20%;
  min-width: 160px;
  max-width: 300px;
  position: relative;
  // overflow: auto;
  // &::-webkit-scrollbar {
  //   width: 4px;
  // }
  // &::-webkit-scrollbar-thumb {
  //   border-radius: 10px;
  //   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  //   opacity: 0.2;
  //   background: #ccc;
  // }
  // &::-webkit-scrollbar-track {
  //   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  //   border-radius: 0;
  //   background: #e7e7e7;
  // }

  .logo-box {
    height: 50px;
    border-bottom: 1px solid #fff;
    text-align: center;
    line-height: 50px;
    font-size: large;
    font-weight: 700;
    color: rgb(204, 202, 204);
    background: #152761;
  }

  .cc-menu {
    display: flex;
    flex-direction: column;

    .cc-li {
      min-height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #fff;
      text-align: center;

      a {
        display: inline-block;
        width: 100%;
      }

      .menu-ul {
        width: 100%;
        height: 100%;
      }
    }

    .cc-menu-item {
      display: inline-block;
      width: 100%;
    }

    .active {
      background-color: rgb(71, 72, 112) !important;
      color: #fff;
    }
  }
  .hiddenbtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    background: rgb(71, 72, 112);
    padding: 0 3px;
    border-radius: 4px;
    color: #fff;
  }
}
.cc-left-menu-small {
  width: 0px;
  min-width: 0px;
  .cc-menu {
    height: 0;
  }
  .hiddenbtn {
    right: -38px;
    bottom: 34px;
    z-index: 99;
  }
}
.cc-left-menu-normal {
  width: 20%;
}

.cc-content-box {
  padding: 20px;
  width: 100%;
  height: 100vh;
  background-color: rgb(241, 237, 237);
}

.cc-content {
  background-color: #fff;
  height: 100%;
  box-shadow: 0px 0px 14px 4px #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.cc-beath {
  padding: 10px 20px;
  // background-color: rgb(132, 186, 214);
  // color: #fff;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
}

.cc-page {
  padding: 20px;
  height: calc(100% - 53px);
  overflow: auto;
}

.wrapper {
  display: flex;
  place-items: flex-start;
  // width: 100vw;
  // height: 100vh;
}

@media (min-width: 1024px) {
  /* nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  } */
}
</style>
